<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery click</title>

    <style>
        div {
            border: 1px solid sienna;
        }
    </style>
    <script src="../libs/jquery.js"></script>
    
    <style>
        p{
            padding: 10px 5px;
        }
        button{
            background: burlywood;
        }
        #logBox{
            max-height: 80vh;
            overflow-y: auto;
        }
    </style>
</head>

<body>
    <p id="useragent"></p>
    <button id="addevent" name="addevent"> addEventListener</button>
    <button id="btn2" name="special click"> jquery special click</button>
    <button id="btn3" name="delegateType click"> jquery special delegateType</button>
    <input type="checkbox" name="checkbox1" id="chk1" style="display: none;">
    
    <br>
    <button id="clear">clear log</button>
    <div id="logBox"></div>
    <pre><code for="jspecial"></code></pre>

<script id="jspecial">
;(function($){
    const isMobile = /(?:iphone|android)/i.test(navigator.userAgent);
    const tapDelay = 200, timeout = 500;
    const mobile = {
            setup:function(){
                $.event.add(this, 'touchstart touchend', handler)
            },
            teardown: function(params) {
                $.event.remove(this, 'touchstart touchend', handler)
            }
        };

    function handler(e) {
        if (e.type === 'touchstart') {
            $.data(this, 'targetElement', e.target);
        } else {
            if ($.data(this, 'targetElement') === e.target) {
                $.data(this, 'targetElement', null);
                $.event.dispatch.call(this, $.Event(e, { type: 'click' }));
            }
        }
    }
    
    if(isMobile) $.event.special.click = mobile;
})(jQuery);
</script>

    <script>
         const useragent = document.getElementById('useragent')
         const logBox = document.getElementById('logBox');
         $(function(){
            init();
        })

         function init(){
            useragent.textContent = `useragent: ${navigator.userAgent}`;
            document.querySelector('code').innerHTML = document.getElementById('jspecial').textContent
            document.getElementById('clear').addEventListener('click', function(){
                logBox.innerHTML = '';
            })

            const addevent = document.querySelector('#addevent');
            addevent.addEventListener('touchstart', e=>{
                log(`addevent touchstart`)
            })
            addevent.addEventListener('touchend', e=>{
                log(`addevent touchend `)
            })
            addevent.addEventListener('click', e=>{
                log(`addevent click`, 'gray')
            })
            
            $('#btn2').on('click.book', clickHandler)
            $('#btn2').on('click.foo', function(params) {
                log('click.foo')
            })
            $('#btn2').on('dblclick', dblclickHandler)
            btn2.addEventListener('click', function(){
                log(`${this.name} native event handler is called`)
            })
            $('body').on('click', '#btn3', clickHandler);

            $('#chk1').on('click', function(){
                log(`${this.name} checked: ${this.checked}`, 'blue')
            })
            chk1.addEventListener('click', function(){
                log(`${this.name} native event handler is called`)
            })
            
            function clickHandler(e){
                log(`invoke ${this.name}'s handler`, 'gray')
                // log(`timestamp ${e.timeStamp}`, 'gray')
            }
            function dblclickHandler(e){
                log(`invoke ${this.name}'s double click handler`, 'gray')
            }
         }

        function log(str, color){
            let p = document.createElement('p');
            p.textContent =`${getCurrentTime()}  ${str} `;
            p.style.color = color || 'black';
            logBox.prepend(p);
        }
        function getCurrentTime(){
            let t = new Date();
            return `${pad(t.getHours())}:${pad(t.getMinutes())}:${pad(t.getSeconds())}:${pad(t.getMilliseconds(), 3)}`
            function pad(n,c){
                return (''+n).padStart(c||2, '0')
            }
        }
        </script>


</body>

</html>